<template>
  <!--弹窗，添加菜单 :append-to-body="true" -->
  <div v-dialog-drag="dialogInfo.width" >
    <el-dialog
      title="添加菜单"
      v-model="dialogInfo.isShow"
      :modal="true"
      :width="dialogInfo.width"
      :close-on-click-modal="true"
      :destroy-on-close="true"
      
    >
      <el-scrollbar style="height:300px;margin: 2px;">
        <nf-form
          :model="model"
          v-bind="menuProps"
        >
        </nf-form>
      </el-scrollbar>
      <el-button type="" @click="addOne">保存</el-button> 
      <el-button type="" @click="addMore">保存后添加下一个</el-button> 

    </el-dialog>
  </div>
</template>

<script>
  import { reactive } from 'vue'
  import { ElButton, ElDialog, ElScrollbar } from 'element-plus'
  import { nfForm } from '@naturefw/ui-elp'
 
  import menu_add from './json/menu-add.json'

</script>

<script setup>

  const props = defineProps({
    current: Object,
    meta: Object,
    dialogInfo: Object,
    menuIndex: Number // 序号
  })
  const info = props.dialogInfo

  const menuProps = reactive(menu_add)

  const model = reactive({})

  const addNew = (menu) => {
    const newMenu = {
      menuId: menu.menuId,
      text: menu.text,
      description: menu.description,
      link: menu.link,
      icon: menu.icon
    }

    if (menu.kind === 1) {
      // 同级菜单
      info.parentMenu.splice(info.index + 1, 0, newMenu)
    } else {
      // 子级
      if (Array.isArray(info.menu.children)) {
        info.menu.children.push(newMenu)
      } else {
        info.menu.children = [newMenu]
      }
    }

    // 保存到 indexedDB 
    info.savaMenuList()
    
  }

  // 添加一个
  const addOne = () => {
    addNew(model)

    // 清空表单
    // model.menuId,
    model.text = ''
    model.description = ''
    model.link = ''
    model.icon = 'FolderOpened'

    info.isShow = false
  }

  // 连续添加
  const addMore = () => {
    addNew(model)

    info.index += 1
  }

</script>
